<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人人汽车5</title>
    <link rel="icon" href="src/icon/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="src\css\general.css" />
    <link
      href="node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="src/css/index.css" />
    <link rel="stylesheet" href="src/css/queries.css" />
    <script defer src="node_modules/jquery/dist/jquery.min.js"></script>
    <script
      type="module"
      defer
      src="node_modules/bootstrap/dist/js/bootstrap.min.js"
    ></script>
  </head>

  <body>
    <main class="main">
      <section class="search-section">
        <div class="search-box">
          <img class="search-icon" src="src/icon/function01.png" alt="" />
          <input class="search-input" type="text" placeholder="搜索车型" />
          <img class="notify-icon" src="src/icon/function02.png" alt="" />
        </div>
      </section>
      <section class="carousel-section">
        <div
          id="carouselExampleCaptions"
          class="carousel slide"
          data-ride="carousel"
        >
          <ol class="carousel-indicators">
            <li
              data-target="#carouselExampleCaptions"
              data-slide-to="0"
              class="active"
            ></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img
                src="src/img/carousel-bac.png"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">免首付 开新车</h5>
                  <p class="carousel-text">领券最多减5000</p>
                  <div class="carousel-time">活动时间: 7.30--8.30</div>
                </div>
                <img class="carousel-img" src="src/img/car02.png" alt="" />
              </div>
            </div>
            <div class="carousel-item">
              <img
                src="src/img/carousel-bac.png"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">免首付 开新车</h5>
                  <p class="carousel-text">领券最多减5000</p>
                  <div class="carousel-time">活动时间: 7.30--8.30</div>
                </div>
                <img class="carousel-img" src="src/img/car02.png" alt="" />
              </div>
            </div>
            <div class="carousel-item">
              <img
                src="src/img/carousel-bac.png"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">免首付 开新车</h5>
                  <p class="carousel-text">领券最多减5000</p>
                  <div class="carousel-time">活动时间: 7.30--8.30</div>
                </div>
                <img class="carousel-img" src="src/img/car02.png" alt="" />
              </div>
            </div>
            <div class="carousel-item">
              <img
                src="src/img/carousel-bac.png"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">免首付 开新车</h5>
                  <p class="carousel-text">领券最多减5000</p>
                  <div class="carousel-time">活动时间: 7.30--8.30</div>
                </div>
                <img class="carousel-img" src="src/img/car02.png" alt="" />
              </div>
            </div>
            <div class="carousel-item">
              <img
                src="src/img/carousel-bac.png"
                class="d-block w-100"
                alt="..."
              />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">免首付 开新车</h5>
                  <p class="carousel-text">领券最多减5000</p>
                  <div class="carousel-time">活动时间: 7.30--8.30</div>
                </div>
                <img class="carousel-img" src="src/img/car02.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="king-section">
        <div class="kings-box">
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king01.png" alt="" />
            </div>
            <span class="king-text">二手车</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king02.png" alt="" />
            </div>
            <span class="king-text">新车</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king03.png" alt="" />
            </div>
            <span class="king-text">零首付</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king04.png" alt="" />
            </div>
            <span class="king-text">分期申请</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king05.png" alt="" />
            </div>
            <span class="king-text">估价</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king06.png" alt="" />
            </div>
            <span class="king-text">报价卖车</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king07.png" alt="" />
            </div>
            <span class="king-text">热销排行</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king08.png" alt="" />
            </div>
            <span class="king-text">降价急售</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king09.png" alt="" />
            </div>
            <span class="king-text">汽车百科</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="src/icon/king10.png" alt="" />
            </div>
            <span class="king-text">汽车养护</span>
          </div>
        </div>
      </section>
      <section class="cards-section">
        <div class="cards-box">
          <div class="card-item card-item-left">
            <p class="card-title">新车抢先看</p>
            <p class="card-text">每周更新</p>
            <img
              class="card-img card-img--right"
              src="src/img/car04.png"
              alt=""
            />
          </div>
          <div class="card-item card-item-right--1">
            <p class="card-title">热销SUV</p>
            <p class="card-text card-text--right">年轻有底气</p>
            <img
              class="card-img card-img--right--1"
              src="src/img/car03.png"
              alt=""
            />
          </div>
          <div class="card-item card-item-right--2">
            <p class="card-title">捡漏二手</p>
            <p class="card-text card-text--right">新手首选</p>
            <img
              class="card-img card-img--right--2"
              src="src/img/car01.png"
              alt=""
            />
          </div>
        </div>
      </section>
      <section class="hot-car-section">
        <div class="hot-cat-title-box">
          <span class="hot-cat-title">热销车型</span>
          <span class="hot-cat-look-all">查看全部&nbsp;&nbsp;></span>
        </div>
        <div class="hot-car-box">
          <div class="hot-car-item hot-car-item--1">
            <img class="hot-car-img" src="src/img/hot-car01.png" alt="" />
            <div class="hot-cat-text-box">
              <p class="hot-cat-text">新车 A系列 588ku</p>
              <p class="hot-cat-money">12.8万起</p>
            </div>
          </div>
          <div class="hot-car-item hot-car-item--2">
            <img class="hot-car-img" src="src/img/hot-car01.png" alt="" />
            <div class="hot-cat-text-box">
              <p class="hot-cat-text">新车 S系列 985sd</p>
              <p class="hot-cat-money">15.8万起</p>
            </div>
          </div>
          <div class="hot-car-item hot-car-item--3">
            <img class="hot-car-img" src="src/img/hot-car01.png" alt="" />
            <div class="hot-cat-text-box">
              <p class="hot-cat-text">新车 B系列 756uu</p>
              <p class="hot-cat-money">9.8万起</p>
            </div>
          </div>
        </div>
      </section>
    </main>
    <nav class="nav-section">
      <div class="nav-box">
        <div class="nav-item nav-item--active">
          <div class="nav-img-box">
            <img class="nav-img" src="src/icon/function08-active.png" alt="" />
          </div>
          <span class="nav-text">首页</span>
        </div>
        <a class="goto-view" href="views/bycat.html">
          <div class="nav-item">
            <div class="nav-img-box">
              <img class="nav-img" src="src/icon/function05.png" alt="" />
            </div>
            <span class="nav-text">买车</span>
          </div>
        </a>
        <div class="nav-item">
          <div class="nav-img-box">
            <img class="nav-img" src="src/icon/function05.png" alt="" />
          </div>
          <span class="nav-text">租车</span>
        </div>
        <div class="nav-item">
          <div class="nav-img-box">
            <img class="nav-img" src="src/icon/function05.png" alt="" />
          </div>
          <span class="nav-text">卖车</span>
        </div>
        <div class="nav-item">
          <div class="nav-img-box">
            <img class="nav-img" src="src/icon/function05.png" alt="" />
          </div>
          <span class="nav-text">我的</span>
        </div>
      </div>
    </nav>
  </body>
</html>
